<!--模板，html代码-->
<template>

   <div class="epidemicNews_data">
      <!-- 标题开始 -->
      <div class="title">
        <h1 >疫情相关新闻</h1>
      
      </div>
      <!-- 标题结束 -->
      <!-- 轮播图开始 -->
      <div class="slideshow">
        <el-carousel :interval="4000" type="card" height="220px">
          <el-carousel-item v-for="item in arrPhoto" :key="item.id" >
            <a :href="item.phref" target="_blank"><img width="100%" height="100%" style="border-radius:58px" :src="item.psrc" alt="item.alt"></a>
          </el-carousel-item>
        </el-carousel>
        

      </div>
       
      <!-- 轮播图结束 -->
      <!-- 正文开始 -->
      <div class="main">
        <div class="card">
          <h2>国内疫情新闻</h2>
			<ul>
				<li><a href="http://www.sznews.com/news/content/2021-07/16/content_24398382.htm" target="_blank">致敬奋战在疫情防控一线的“最美逆行者</a></li>
				<li><a href="http://m.news.cctv.com/2021/07/16/ARTIihc49mqck38PBQtGwzm6210716.shtml" target="_blank">国家卫健委：昨日新增确诊病例36例 均为境外输入病例</a></li>
				<li><a href="http://www.hxnews.com/news/la/twxw/202107/16/2004728.shtml" target="_blank">台湾同胞纷纷“登陆”接种大陆新冠疫苗</a></li>
				<li><a href="http://www.hb.chinanews.com/news/2021/0716/360312.html" target="_blank">“舞动的幽灵 新冠启示录”病毒科普展开幕</a></li>
				<li><a href="https://baijiahao.baidu.com/s?id=1700711198411189080&wfr=spider&for=pc" target="_blank">中国新冠疫苗接种呈现“加速度”</a></li>
				
			</ul>
        </div>
        <div class="card">
          <h2>国外疫情新闻</h2>
      <ul>
				<li><a href="https://baijiahao.baidu.com/s?id=1705419591519453979&wfr=spider&for=pc	" target="_blank">漠视生命 党争拖累美国疫情防控</a></li>
				<li><a href="https://news.online.sh.cn/news/gb/content/2021-07/16/content_9793681.htm" target="_blank">荷兰新冠疫情恶化　年轻感染者增多</a></li>
				<li><a href="https://www.cqcb.com/headline/2021-07-16/4288982_pc.html">英国解封前疫情再加码：单日新增近5万人 63人死亡</a></li>
				<li><a href="https://baijiahao.baidu.com/s?id=1699383162625949240&wfr=spider&for=pc" target="_blank">日本疫情严峻 但东京奥运会已箭在弦上</a></li>
				<li><a href="https://baijiahao.baidu.com/s?id=1699556457520256012&wfr=spider&for=pc" target="_blank">德国疫情形势好转 依旧不能掉以轻心</a></li>
				
			</ul>
          
        </div>

        <div class="card">
          <h2>防疫知识</h2>
          <ul>
				    <li><a href="https://www.thepaper.cn/newsDetail_forward_10919098" target="_blank">疫情防控宣传知识！</a></li>
			   </ul>
         <div class="video">
         <video width="320px" height="230px"  controls>
           <source src="../../assets/1.mp4" type="video/mp4">
          </video>
         </div>

        </div>
      </div>
        
      <!-- 正文结束 -->
      <!-- 底部开始 -->
      <div class="botoom">
        <div class="time" >
         <div class="btn" v-on:click='submitHandler'>当前时间</div>
          
        </div>
        <div class="author">
          <i class="el-icon-edit" >
            <a href="https://gitee.com/zhang-yu-111" target="_blank">作者-张宇</a>
          </i>
        </div>

      </div>
      <!-- 底部结束 -->



  </div>
  
</template>

<!--js代码-->
<script>
export default{
  data(){
      return {
        arrPhoto:[
          {
            id:1,
            psrc:'http://n.sinaimg.cn/news/crawl/63/w550h313/20210716/2c03-8d0c6f133f8982736f9ac7c9897711da.jpg',
            phref:'http://news.sina.com.cn/c/2021-07-16/doc-ikqcfnca7168224.shtml',
            alt:'10天新增66例本土确诊病例, 云南疫情何时可以结束？'
          },
          {
            id:2,
            psrc:'http://image1.chinanews.com.cn/cnsupload/big/2021/04-06/4-426/86a3990b9baa4b1bb0a7204ad0ee5c2e.jpg',
            phref:'https://www.chinanews.com/gj/2021/07-16/9521523.shtml	',
            alt:'希腊新冠疫苗预约量激增 专家预测疫情将使ICU爆满'
          }, 
          {
            id:3,
            psrc:'http://p1.img.cctvpic.com/cportal/cnews-yz/img/2021/07/15/02f74ca8a83b4c908b4cf54af13f6e1c_16x9.jpg',
            phref:'http://m.news.cctv.com/2021/07/15/ARTIvqFXkixs7M4iCGldQZJI210715.shtml',
            alt:'世界卫生组织：全球正处于第三轮疫情早期阶段？'
          }


        ],
        currentDate: new Date()
        
      
      }
    },
    methods:{
    submitHandler() {
                
                alert(this.currentDate)
            }

    },
    created(){
      
    }
   

}
</script>

<!--css代码-->
<style scoped>
    .title {
      text-align: center;
      height: 60px;
      background-color: aliceblue;
      padding-top: 1px;
    }
     h1 {
      font-family: "PingFang SC";
      font-size: 25px;
    }
    .slideshow {

      height: 220px;
      background-color:aliceblue;
      margin: 0 auto;
      box-sizing:content-box;
      border-bottom-style:dashed;
      border-top-style: double;
      
    }
    .main {
      height: 350px;
      background-color:aliceblue;
      display:flex;
    }
    .main .card {
      flex: 1;
      height: 350px;
      border:1px solid #ccc;
    }
   .main .card h2{
        text-align: center;
				font-size:18px;
				padding:5px 0;
				border-bottom:1px solid #ccc;
				margin-bottom:10px;
			}
  
    .main .card ul li {
				height:40px;
				line-height:40px;
				border-bottom:1px dashed #ccc;
				
				
			}
			.main .card ul li a {
				color:#333;
				font-size:15px;
				text-decoration:none;
				
				
				
			}
			.main .card li a:hover {
				text-decoration: underline;
			}
      .video {
        width:320px ;
        height:230px;
        margin: 0 auto;
      }
      .botoom {
      height: 50px;
      background-color:aliceblue;
      display: flex;
      
    }
    .botoom .time {
      text-align: left;
      flex: 1;
      padding-top: 5px;
      background-color:aliceblue;
      padding-left: 10px;
    }
    .botoom .time .btn {
      width: 100px;
      height: 40px;
      background-color:dodgerblue;
      color: #fff;
      text-align: center;
      padding-top: 8px;
       border-radius: 10px;
       letter-spacing: 2px;
      
    }
    .botoom .author {
      text-align: right;
      flex: 1;
      background-color:aliceblue;
      padding-top: 15px;
      padding-right: 30px;
     
    }

</style>